<!--  -->
<template>
  <div>
    <Card>
      <div slot="title" >
         <Button v-if="btnp.fzgli_xzfz" @click="handleClickAdd" class="zh-hollow" type="primary" icon="plus-round">新增分组</Button>
      </div>
      <Table :loading="loading" border :columns="columns" :data="data"></Table>
      <Page :total="total" show-total show-sizer :current.sync="pageNumber" @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
    </Card>
    <Modal :loading="modalLoad" v-model="modal_group" :title="modalTitle" @on-ok="save"  ok-text="保存" cancel-text="放弃操作" :mask-closable="false">
      <Form :model="group" :label-width="80" style="padding:15px 30px;">
        <FormItem label="分组名称*">
          <Input v-model="group.name" ></Input>
        </FormItem>
        <FormItem label="角色配置*">
          <Select v-model="group.roles" multiple filterable>
            <Option v-for="item in roleList" :value="item.uuid" :key="item.uuid">{{ item.names }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal> 
  </div>
</template>

<script>
import util from '@/libs/util.js'
import {getRoleGroup,saveGroup,getAllRole ,deleteGroup} from '@/libs/system.js'
export default {
name:'',
  data () {
    return {
      btnp:{},
      btn:{
        fzgli_xzfz:false,
        fzgli_bj:false,
        fzgli_sc:false
      },
      modalLoad:true,
      group:{
        uuid:'',
        name:'',
        roles:[]
      },
      pageSize:10,
      pageNumber:1,
      modalTitle:'',
      modal_group:false,
      total:6,
      loading:true,
      roleList:[],
      columns:[
        {
          key:'names',
          title:'分组名称',

          minWidth:100
        },
        {
          key:'roleNames',
          title:'包含角色',
          minWidth:200
        },
        {
          key:'time',
          title:'新增时间',
          minWidth:130
        },
        {
          key:'action',
          title:'操作',
          align:'center',
          minWidth:100,
          fixed:'right',
          render:(h,params)=>{
            //判断是否显示某些操作按钮
            return h('div',[
              h('Button',{
                props:{
                  type:'text',
                  size:'small'
                },
                style:{
                  color:'#2D8CF0',
                  display:this.btnp.fzgli_bj?'inline-block':'none'
                },
                on:{
                  click:()=>{
                    this.goEdit(params.row);
                    
                  }
                }
              },'编辑'),
              h('Button',{
                props:{
                  type:'text',
                  size:'small'
                },
                style:{
                  color:'#EA0000',
                  display:this.btnp.fzgli_sc?'inline-block':'none'
                },
                on:{
                  click:()=>{
                    let config={
                      title:'删除分组',
                      content:'分组删除后无法恢复。',
                      okText:'删除',
                      cancelText:'放弃操作',
                      onOk:()=>{
                        this.delete(params.row.uuid)
                      }
                    }
                    this.$Modal.confirm(config)
                  }
                }
              },'删除')
            ])
          }
        }
      ],
      data:[]
    };
  },
  methods:{
    async delete(uuid){
      let res=await deleteGroup(uuid);
      let response=res.data;
      if(response.code===200){
        this.$Notice.success({
            desc:'已删除'
          });
          this.pageNumber=1;
          this.getTable();
      }else{
        this.$Notice.error({
          desc:response.msg
        });
      }
    },
    async save(){
      if(!this.group.name){
        this.$Notice.error({
          desc:"请输入分组名称"
        })
      }else if(this.group.roles.length<=0){
        this.$Notice.error({
          desc:"请为分组选择角色"
        })
      }else{
        let flag=this.modalTitle=='新增分组'?'save':'edit';
        let uuid=this.group.uuid;
        let names=this.group.name;
        let roleUuid=this.group.roles.join(',');
        let res=await saveGroup({uuid,names,roleUuid});
        let response=res.data;
        if(response.code===200){
          this.$Notice.success({
            desc:'已保存'
          });
          this.pageNumber=1;
          this.getTable();
          this.modal_group=false;
        }else{
          this.$Notice.error({
            desc:response.msg
          });
        }
      }
      this.modalLoad=false;
      let that=this;
      setTimeout(()=>{
        that.modalLoad=true;
      },500)
      
    },
    async getRoleList(){
      if(this.roleList.length<=0){
        let res=await getAllRole();
        let response=res.data;
        if(response.code===200){
          this.roleList=response.data;
        }else{
          this.$Notice.error({
            desc:response.msg
          });
        }
      }
    },
    handleClickAdd(){
      this.modalTitle="新增分组";
      this.getRoleList();
      this.modal_group=true;
    },
     pageChange(number){
      this.pageNumber=number;
      this.getTable();
    },
    pageSizeChange(size){
      this.pageSize=size;
      this.getTable();
    },
    goEdit(obj){
      this.modalTitle="编辑分组信息";
      this.getRoleList();
      this.group={
        uuid:obj.uuid,
        name:obj.names,
        roles:obj.roleUuid.split(',')
      }
      this.modal_group=true;
    },
    async getTable(){
      this.loading=true;
      let res=await getRoleGroup(this.pageNumber,this.pageSize);
      let response=res.data;
      if(response.code===200){
        
          this.total=response.data.total;
          this.data=response.data.rows.map(item=>{
            item.time=!!item.created?item.created.slice(0,16):'';
            return item
          })
          this.loading=false;
      }else{
          this.$Notice.error({
              title: '请求出错',
              desc:response.msg
          });
      }
      
    },
  },
  watch:{
    modal_group:function(){
      if(!this.modal_group){
        this.group={
          uuid:'',
          name:'',
          roles:[]
        }
      }
    }
  },
  created(){
    this.getTable();
    this.btnp=util.bpower(this,this.btn);
  }
}

</script>
<style lang='scss' >
</style>